<template>
	<view>
		<view style="padding: 20rpx;">
			<view class="cards">
				<u-row gutter="12">
					<u-col span="3">
						<image :src="img" mode="aspectFit" style="width: 160rpx;height: 220rpx;border-radius: 10rpx;">
						</image>
					</u-col>
					<u-col span="9" style="padding: 15rpx;">
						<view style="margin-top: -30rpx;">
							<text style="font-size: 34rpx;font-weight: 500;">{{filmName}}</text>
							<text style="font-size: 34rpx;font-weight: 500;margin-left: 15rpx;">{{count}}张</text>
							<view
								style="float: right;margin-right: -28rpx;height: 40rpx;width: 150rpx;background-color:#FCF3DB ;color: #F39800;border-radius: 90rpx 0rpx 0rpx 90rpx;">
								
								<view style="margin-left: 10rpx;margin-top: 3rpx;">
									<u-icon  name="clock" color="#F39800" size="28" style="margin: 5rpx;"></u-icon>
									<!-- <text>{{effectiveTime}}</text> -->
									<u-count-down @end="downend" bg-color="#FCF3DB" color="#F39800"
										separator-color="#F39800" ref="uCountDown" :autoplay="true" :timestamp="timestamp"
										:show-days="false" :show-hours="false"></u-count-down>
								</view>
							</view>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 30rpx;color: #9a9a9a;">{{time}}</text>
						</view>
						<view style="margin-top: 10rpx;" class="hide">
							<text style="font-size: 30rpx;color: #9a9a9a;">{{cinemaName}}-{{hallName | getstringleft}} </text>
						</view>
						<view style="margin-top: 5rpx;" class="hide">
							<text style="font-size: 30rpx;color: #9a9a9a;">{{seatinfos}}</text>
						</view>
					</u-col>
				</u-row>
				<u-gap height="10" bg-color="#FFFFFF"></u-gap>
				<u-icon name="close-circle" color="#EA5344" size="28" style="margin: 5rpx;"></u-icon>
				<text style="color: #EA5344;">不支持退票、改签</text>
			</view>
			<view class="cards" style="margin-top: 20rpx;padding: 5rpx;">
				<u-cell-group :border="false">
					<u-cell-item :title-style="{'fontSize':'34rpx'}" title="红包与代金券" value="无可用"></u-cell-item>
					<u-cell-item :title-style="{'fontSize':'34rpx'}" title="观影卡" value="暂无"></u-cell-item>
				</u-cell-group>
				<view style="float: right;margin-right: 40rpx;font-size: 30rpx;font-weight: bold;margin-top: 20rpx;">
					<text>小计:</text>
					<text style="color: #EA5344;">{{amount}}元</text>
				</view>
			</view>
			<view class="cards" style="margin-top: 20rpx;height: 160rpx;padding: 5rpx;">
				<u-cell-group :border="false">
					<u-cell-item :title-style="{'font-size':'38rpx'}" :title="phone" label="手机号仅用于生成订单"
						:border-bottom="false"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="cards" style="margin-top: 20rpx;height: 500rpx;padding: 20rpx;margin-bottom: 20rpx;">
				<view style="">
					<text style="font-size: 38rpx;font-weight: 500;">购票需知</text>
				</view>
				<u-line margin="15rpx" />
				<view style="margin-top: 30rpx;">
					<rich-text style="color: rgba(153, 153, 153, 1);line-height: 45rpx;" :nodes="gpxz"></rich-text>
				</view>
			</view>
		</view>

		<view style="width: 100%;background-color: #FFFFFF;height: 120rpx;padding: 20rpx;">
			<u-button hover-class="none" :custom-style="customStyle" @click="payorder" >{{amount}}元 确认支付</u-button>
			
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" @confirm="golist"></u-modal>
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				customStyle: {
					width:'100%',
					color: '#FFFFFF',
					backgroundColor: '#F45664',
					height: '90rpx',
					fontSize:'36rpx'
				},
				timestamp: 300,
				show: false,
				content: "",
				effectiveTime: "",
				orderid: '',
				phone: "",
				amount: 0,
				filmName: "",
				info: "",
				hallName: "",
				seatinfo: "",
				cinemaId: "",
				cinemaName: "",
				count: 0,
				filmId: "",
				hallId: "",
				selectSeat: "",
				showIndex: "",
				showTime: "",
				cityName: "",
				seatindexs: '',
				seatinfos: "",
				gpxz: "1.请确认场次和时间无误，购买成功后将不予退换<br>2.由于设备故障等不可抗力因素，存在少量场次取消的情况，会进行退票退款<br>3.由于影院系统不稳定等因素，存在出票失败的情况，会进行退款<br>4.取票码可以在“我的-电影票”中查看<br>5.如有疑问请联系客服",
				img: "",
				payinfo: {
					"expireDate": "",
					"nonceStr": "",
					"package": "",
					"paySign": "",
					"signType": "",
					"timeStamp": "",
					"tradeNo": ""
				},
				time:""
			}
		},
		onLoad(pamar) {
			this.amount = pamar.amount
			this.img = pamar.smallPhoto
			this.filmName = pamar.filmName
			this.info = pamar.info
			this.hallName = pamar.hallName
			this.phone = Config.phone
			this.time =uni.getStorageSync('confirminfo').time
			// this.orderid = pamar.orderid
			this.seatinfo = pamar.seatInfo
			this.hallId = pamar.hallId
			this.showIndex = pamar.showIndex
			this.seatindexs = pamar.seatindexs
			this.effectiveTime = pamar.endtime
			this.showTime = pamar.showTime
			this.filmId = pamar.filmId
			
			let tmpseat = this.seatinfo.split(',')

			let a = ""
			this.count = tmpseat.length
			for (var i = 0; i < tmpseat.length; i++) {
				a = a + tmpseat[i].replace(/:/g, '排') + '座' + " "
			}
			this.cinemaId = pamar.cinemaId
			this.cinemaName = pamar.cinemaName
			this.filmId = pamar.filmId
			this.seatinfos = a
			this.selectSeat = this.seatinfo.replace(/\|/g, ',')
			this.payinfo = uni.getStorageSync('payinfo')
			//this.getinfo()
			//this.$refs.uCountDown.start();
		},
		filters: {
			getstringleft: function(value) {
				let a = value.indexOf('厅')
				if (a != -1) {
					return value.substr(0, a + 1)
				} else {
					return value
				}
			}
		},
		methods: {
			downend() {
				this.$refs.uToast.show({
					title: '订单已超时',
					type: 'error'
				})
				uni.navigateBack({
					delta: 2
				})
			},
			golist() {
				uni.redirectTo({
					url: '/pages/orderlist/orderlist'
				});
			},
			payorder() {
				let that = this
				if(that.payinfo.tradeNo !=""){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: that.payinfo.timeStamp,
						nonceStr: that.payinfo.nonceStr ,
						package: that.payinfo.package,
						signType: that.payinfo.signType,
						paySign: that.payinfo.paySign,
						success: function(resa) {
							uni.request({
								url: Config.ServerIP +
									"/wxpay/app/pay/payOrder/update/" + that
									.payinfo.tradeNo,
								method: "PUT",
								header: {
									Authorization: 'Bearer ' + Config.token
								},
								success: (resb) => {
									
									that.content = "支付成功，跳转到订单"
									that.show = true
									
									// uni.navigateTo({
									// 	url: '/pages/orderlist/orderlist' 
									// });
								}
							})
					
						},
						fail: function(err) {
							// that.content = "支付失败，跳转到订单"
							// that.show = true
					
						}
					});
					return
				}
				uni.request({
					url: Config.ServerIP + '/wxpay/wx/pay/v2/miniAppPay',
					method: "POST",
					data: {
						cinemaId: that.cinemaId,
						cinemaName: that.cinemaName,
						cityId: Config.loaction.cityId,
						cityName: Config.loaction.name,
						count: that.count,
						countPrice: parseFloat(that.amount),
						price: parseFloat(that.amount),
						filmId: that.filmId,
						filmImage: that.img,
						filmName: that.filmName,
						hallId: that.hallId,
						hallName: that.hallName,
						mobile: Config.phone,
						openId: Config.openid,
						selectSeat: that.selectSeat,
						showIndex: that.showIndex,
						showTime: that.showTime,
						seatInfo: that.seatindexs,
						appKey:'6A510782BD7A439F994F8F25A99BEE52'

					},
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (res) => {
						if (res.data.code == 200) {
							that.payinfo.expireDate = res.data.data.expireDate
							that.payinfo.nonceStr = res.data.data.nonceStr
							that.payinfo.package = res.data.data.package
							that.payinfo.paySign = res.data.data.paySign
							that.payinfo.signType = res.data.data.signType
							that.payinfo.timeStamp = res.data.data.timeStamp
							that.payinfo.tradeNo = res.data.data.tradeNo
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.data.timeStamp,
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								success: function(resa) {
									uni.request({
										url: Config.ServerIP +
											"/wxpay/app/pay/payOrder/update/" + that
											.payinfo.tradeNo+'/6A510782BD7A439F994F8F25A99BEE52',
										method: "PUT",
										header: {
											Authorization: 'Bearer ' + Config.token
										},
										success: (resb) => {
											uni.requestSubscribeMessage({
											  tmplIds: ['ulMLPRXZuPauWmbgkJvs8x-V3du0UGvLccS1BKUm9mE','1zkPNp3eUi2KXnJ-NFrYHpfipBAU4PwIoVBRrLhGVHQ','k6GZgHJrVPitH31pm6PJSQQ7SwZSDGGzL63OBbncNhg'],
											  success () { }
											})
											that.content = "支付成功，跳转到订单"
											that.show = true
											
											// uni.navigateTo({
											// 	url: '/pages/orderlist/orderlist' 
											// });
										}
									})

								},
								fail: function(err) {
									// that.content = "支付失败，跳转到订单"
									// that.show = true

								}
							});
						} else {
							// that.content = "下单失败，此座可能已被售出"
							// that.show = true
						}

					}
				})
			},
			getinfo() {
				let that = this;
				uni.request({
					url: Config.ServerIP + "/movie/app/movie/ticket/order",
					method: "POST",
					data: {
						orderId: that.orderid
					},
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (res) => {

						if (res.data.code == 200) {
							let tmpseat = res.data.data[0].seatInfo.split('|')
							let a = ""
							that.count = tmpseat.length
							for (var i = 0; i < tmpseat.length; i++) {
								a = a + tmpseat[i].replace(/:/g, '排') + '座' + " "
							}
							that.seatinfo = a

							let tmpa = res.data.data[0].effectiveTime.split(' ')[1]

							that.effectiveTime = tmpa.split(':')[0] + ":" + tmpa.split(':')[1]
							that.cinemaId = res.data.data[0].cinemaId
							that.cinemaName = res.data.data[0].cinemaName
							that.filmId = res.data.data[0].filmId
							that.filmName = res.data.data[0].filmName
							that.hallName = res.data.data[0].hallName
							that.selectSeat = res.data.data[0].seatInfo.replace(/\|/g, ',')
							that.showTime = res.data.data[0].filmTime
							let order = {
								"info": that.info,
								"orderid": that.orderid,
								"seatinfo": that.seatinfo,
								"cinemaId": that.cinemaId,
								"cinemaName": that.cinemaName,
								"cityId": Config.loaction.cityId,
								"cityName": Config.loaction.name,
								"count": that.count,
								"price": parseFloat(that.amount),
								"filmId": that.filmId,
								"filmImage": that.img,
								"filmName": that.filmName,
								"hallId": that.hallId,
								"hallName": that.hallName,
								"mobile": Config.phone,
								"selectSeat": that.selectSeat,
								"showIndex": that.showIndex,
								"showTime": that.showTime,
								"seatInfo": that.seatindexs,
								"countPrice": parseFloat(that.amount),
							}

							let tmporder = uni.getStorageSync("orderList")
							if (tmporder == "") {
								tmporder = []
							}
							tmporder.push(order)
							uni.setStorageSync("orderList", tmporder)
						} else {

						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.custom-style {
		color: #FFFFFF;
		width: 80%;
		margin-top: 10rpx;
		background-color: #EA5344;
		font-size: 34rpx;

	}

	.cards {
		width: 100%;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.hide {
		display: -webkit-box;
		/*设置为弹性盒子*/
		-webkit-line-clamp: 1;
		/*最多显示1行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*超出显示为省略号*/
		-webkit-box-orient: vertical;
		/* 从上向下垂直排列子元素。 */
	}
</style>
